<template>
  <div :class="['axiom-input', { 'axiom-input--disabled': disabled, 'axiom-input--error': error }]">
    <label v-if="label" class="axiom-input__label">
      {{ label }}
      <span v-if="required" class="axiom-input__required-star">*</span>
    </label>
    <div class="axiom-input__wrapper">
      <el-input
        ref="inputRef"
        v-bind="$attrs"
        :model-value="modelValue"
        @update:modelValue="$emit('update:modelValue', $event)"
        @input="$emit('input', $event)"
        @change="$emit('change', $event)"
        @blur="$emit('blur', $event)"
        @focus="$emit('focus', $event)"
        @clear="$emit('clear')"
        @keydown.enter="$emit('keydown.enter', $event)"
        :placeholder="placeholder"
        :disabled="disabled"
        :clearable="clearable"
        :type="type"
        :size="size"
        :rows="rows"
        :autosize="autosize"
        :readonly="readonly"
        :maxlength="maxlength"
        :minlength="minlength"
        :show-password="showPassword"
      >
        <template v-if="prefixIcon" #prefix>
          <AxiomIcon :name="prefixIcon" />
        </template>
        <template v-if="suffixIcon" #suffix>
          <AxiomIcon :name="suffixIcon" />
        </template>
      </el-input>
    </div>
    <div v-if="helpText && !error" class="axiom-input__help-text">{{ helpText }}</div>
    <div v-if="error" class="axiom-input__error-text">{{ error }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import AxiomIcon from './AxiomIcon.vue';

defineOptions({
  name: 'AxiomInput'
});

defineProps({
  modelValue: { type: [String, Number], default: '' },
  prefixIcon: { type: String, default: '' },
  suffixIcon: { type: String, default: '' },
  label: { type: String, default: '' },
  required: { type: Boolean, default: false },
  placeholder: { type: String, default: '请输入' },
  disabled: { type: Boolean, default: false },
  clearable: { type: Boolean, default: true },
  showPassword: { type: Boolean, default: false },
  type: { type: String, default: 'text' },
  maxlength: { type: [String, Number], default: undefined },
  minlength: { type: [String, Number], default: undefined },
  rows: { type: Number, default: 2 },
  autosize: { type: [Boolean, Object], default: false },
  readonly: { type: Boolean, default: false },
  size: { type: String, default: 'default', validator: (value) => ['large', 'default', 'small'].includes(value) },
  error: { type: String, default: '' },
  helpText: { type: String, default: '' },
  autofocus: Boolean,
});

defineEmits(['update:modelValue', 'input', 'change', 'blur', 'focus', 'keydown.enter', 'clear']);

const inputRef = ref(null);

defineExpose({
  inputRef
});
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-input';
</style>